<template>
    <div class="container" @click="toPlayerDetail">
        <div class="box">
            <div class="left">
                <div id="face" :class="{paused: !isPlaying}">
                    <img :src="currentSong.cover" alt="">
                </div>
                <div style="margin-left: 5px;font-family: '行书';">{{ currentSong.name }}（{{ currentSong.artist }}）</div>
            </div>
            <div class="right">
                <div class="play_btn" @click="playStatus">
                    <van-icon v-if="!isPlaying" name="play-circle-o" size="28"></van-icon>
                    <van-icon v-else name="pause-circle-o" size="28"></van-icon>
                </div>
                <div class="list_icon" style="margin-left: 5px;">
                    <van-icon name="bars" size="28"></van-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { usePlayerStore } from '../../stores/player'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'

const playerStore = usePlayerStore()
const { isPlaying, currentSong } = storeToRefs(playerStore)
const router = useRouter()

const toPlayerDetail = () => {
    router.push('/playerdetail')
}
const playStatus = (event) => {
    event.stopPropagation()
    playerStore.toggle()
}
</script>
<style lang="less" scoped>

@keyframes rotate {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

.container {
    width: 100%;
    height: 60px;
    background-color: var(--custom-player-bg, #181818);
    border-top: 1px solid #333;
    position: fixed;
    bottom: 0;
    padding: 10px;
    box-sizing: border-box;
    color: var(--custom-player-text, #fff);

    .box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            display: flex;
            align-items: center;
            color: var(--custom-player-text, #fff);
            #face{
                animation: rotate 2s linear infinite;
                animation-play-state: paused;
            }
            #face:not(.paused) {
                animation-play-state: running; 
            }
            #face.paused{
                animation-play-state: paused;
            }
            #face>img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }
        .right{
            display: flex;
            align-items: center;
            color: var(--custom-player-icon, #fff);
        }
    }
}
</style>